<template>
  <a-form ref="formRef" :model="formData" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-row>
      <a-col :span="24">
        <a-form-item label="指令名称">
          <a-input v-model:value="formData.zlmc" placeholder="请输入指令名称" />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item label="指令级别" name="zljb">
          <a-select
            v-model:value="formData.zljb"
            :options="zljbList"
            :placeholder="rules.zljb.message"
            :getPopupContainer="getContainer"
          />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item label="选择签收单位" name="dw">
          <a-tree-select
            v-model:value="formData.dw"
            show-search
            multiple
            allowClear
            label-in-value
            treeNodeFilterProp="label"
            placeholder="选择签收单位"
            max-tag-count="responsive"
            :max-tag-text-length="10"
            :fieldNames="{ children: 'nodes', label: 'text', value: 'code' }"
            :tree-data="unitTreeList"
            :tree-checkable="true"
            :getPopupContainer="getContainer"
            :height="300"
          />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import { addInstructionTemplate, editInstructionTemplate } from '@gis/lib/api';
import { handleFormResult } from '@gis/lib/utils/resolver.js';
import { getEnumList } from '@gis/lib/enums';
import { getCombineDW, getSplitDW } from '../../utils.js';
import get from 'lodash-es/get.js';
import { useTreeDataStore } from '@gis/lib/pinia/treeData.js';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';

export default {
  name: 'AddEdit',
  props: {
    data: Object,
  },
  data() {
    return {
      rules: {
        zlmc: { required: true, message: '请填写指令名称' },
        zljb: { required: true, message: '请选择指令级别' },
        dw: { required: true, message: '请选择签收单位' },
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 17 },
      formData: {},
      zljbList: [],
      // unitTreeList: [],
    };
  },
  computed: {
    unitTreeList() {
      const unitTree = useTreeDataStore();
      const userInfo = useUserInfoStore();
      return unitTree.getUnitTree(userInfo.area_code);
    },
  },
  created() {
    const dwbm = get(this.data, 'dwbm') || '';
    const dwmc = get(this.data, 'dwmc') || '';
    this.formData = {
      dw: getCombineDW({ values: dwbm, labels: dwmc }),
      zlmc: get(this.data, 'zlmc'),
      zljb: get(this.data, 'zljb'),
    };
    this.zljbList = getEnumList('zljb');
    // const userInfo = userInfoStore();
    // const unitTree = unitTreeStore();
    // unitTree.GetUnitTree({ area_code: userInfo.area_code, max_level: 4 });
    // this.getGAUnitTree();
    const unitTree = useTreeDataStore();
    const userInfo = useUserInfoStore();
    const level = userInfo.area_code.split('.').length;
    unitTree.getUnitTreeAsync({ area_code: userInfo.area_code, is_contain_oneself: true, max_level: level + 2 });
  },
  methods: {
    getContainer() {
      return document.body;
    },
    // async getGAUnitTree() {
    //   this.unitTreeList = handleCommonResult(await getGAUnitTree());
    // },
    async onOk() {
      const valid = await this.$refs.formRef.validate();
      if (!valid) return false;
      let id = get(this.data, 'id');
      let dw = get(this.formData, 'dw');
      let params = {
        id: id,
        zlmc: get(this.formData, 'zlmc'),
        zljb: get(this.formData, 'zljb'),
        ...getSplitDW(dw, { labels: 'dwmc', values: 'dwbm' }),
      };
      const api = id ? editInstructionTemplate : addInstructionTemplate;
      return handleFormResult(await api(params));
    },
  },
};
</script>

<style scoped></style>
